<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="/back/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="/back/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="/back/css/invalid.css" type="text/css"
          media="screen" />

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="/back/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="/back/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>

    <!-- 引入富文本 -->
    <link rel="stylesheet" type="text/css" href="/back/widget/dist/bootstrap.css">
    <link href="/back/widget/dist/summernote.css" rel="stylesheet"/>
    <script src="/back/widget/dist/bootstrap.js"></script>
    <script src="/back/widget/dist/summernote.js"></script>
    <script src="/back/widget/dist/lang/summernote-zh-CN.js"></script>
    <script type="text/javascript" src="/commons/js/mydist.js"></script>

    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="/back/widget/webuploader/webuploader.css">
    <script type="text/javascript" src="/back/widget/webuploader/webuploader.min.js"></script>
    <script type="text/javascript" src="/commons/js/myupload.js"></script>

    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>

    <script th:inline="javascript">
        $(function () {
            //请求语言列表
            languageList("language_select", classifyList);
            languageList("language_search_select", queryProductList);

            //初始化富文本
            initDist("summernote");

            //初始化上传插件
            uploadInit((respData, file) => {
                $("#file_paths").append("<input type=\"hidden\" name=\"productImages\" value=\"" + respData + "\"/>");
                
                // 显示图片处理选项
                showImageProcessingOptions(respData, file.name);
            });
        });

        //查询产品分类
        function classifyList() {
            myajax({
                url: '/api/classify/list',
                data: {
                    languageId: $("#language_select").val()
                },
                success: function (data) {
                    $("#pre_classify_select").html("<option value=\"-1\">无</option>");
                    if (data && data.length > 0) {
                        data.forEach(function (item) {
                            $("#pre_classify_select").append("<option value='" + item.id + "'>" + item.classifyName + "</option>");
                        });
                    }
                }
            });
        }

        /**
         * 查询产品列表
         */
        function queryProductList(){
            //查询列表
            list({
                url: '/api/product/list',
                data: {
                    languageId: $("#language_search_select").val()
                },
                delUrl: '/api/product/remove',
                cols: [{col:"id"}, {col:"classifyName"}, {col: "productImage", type:"img", width:60, height:50},
                    {col:"productName"}, {col:"productInfo"}]
            });
        }

        /**
         * 打开弹窗的回调
         */
        function callback(){
            $('.webuploader-container div[id]').css({
                'width': '100%',
                'height': '100%'
            });
        }
        
        /**
         * 显示图片处理选项
         */
        function showImageProcessingOptions(filename, originalName) {
            const processBtn = `
                <div style="margin-top: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    <strong>图片处理选项:</strong> ${originalName}<br>
                    <button type="button" class="mybutton" style="margin: 5px;" onclick="processProductImage('${filename}', 800, 600)">800x600</button>
                    <button type="button" class="mybutton" style="margin: 5px;" onclick="processProductImage('${filename}', 1200, 800)">1200x800</button>
                    <button type="button" class="mybutton" style="margin: 5px;" onclick="processProductImage('${filename}', 1920, 1080)">高清</button>
                    <button type="button" class="mybutton" style="margin: 5px;" onclick="openCustomResize('${filename}')">自定义</button>
                </div>
            `;
            $('#upload_list').append(processBtn);
        }
        
        /**
         * 处理产品图片
         */
        function processProductImage(filename, width, height) {
            if (confirm(`确定要将图片处理为 ${width}x${height} 尺寸吗？`)) {
                myajax({
                    url: '/api/file/resize',
                    type: 'POST',
                    data: {
                        filename: filename,
                        width: width,
                        height: height,
                        quality: 0.9
                    },
                    success: function(data) {
                        alert('图片处理成功！新文件: ' + data);
                        // 更新隐藏字段为处理后的文件名
                        $('#file_paths input[value="' + filename + '"]').val(data);
                    },
                    error: function(xhr, status, error) {
                        alert('图片处理失败: ' + error);
                    }
                });
            }
        }
        
        /**
         * 打开自定义尺寸对话框
         */
        function openCustomResize(filename) {
            const width = prompt('请输入宽度 (px):', '800');
            if (width && !isNaN(width)) {
                const height = prompt('请输入高度 (px):', '600');
                if (height && !isNaN(height)) {
                    processProductImage(filename, parseInt(width), parseInt(height));
                }
            }
        }

    </script>
</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <h2>产品管理</h2>
            <br/>
            <form>
                <select id="language_search_select" name="languageId" onchange="queryProductList()"></select>
            </form>
            <br/>
            <div class="tab-content default-tab" id="tab1">
                <form id="formid" method="post">
                    <table>
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>所属分类</th>
                            <th>产品封面</th>
                            <th>产品名称</th>
                            <th>产品基本描述</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        </tbody>

                        <!-- 脚部 -->
                        <tfoot>
                        <tr>
                            <td colspan="6">
                                <div class="bulk-actions align-left">
                                    <a class="mybutton" href="javascript:openDialog('dialog_add', '新增产品', 1200, 900, callback());">新增产品</a>
                                </div>
                                <!-- 分页导航 -->
                                <!--                            <div class="pagination" th:replace="backs/page :: fenye">-->
                                <!--                            </div> &lt;!&ndash; End .pagination &ndash;&gt;-->
                                <div class="clear"></div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </form>
            </div>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->
<div id="dialog_add" style="display: none;">

    <!-- End .content-box-header -->
    <div class="content-box-content">
        <h2>新增分类</h2>

        <form id="myform">
            <p>
                选择语言：
            </p>
            <p>
                <select id="language_select" name="languageId" onchange="classifyList()"></select>
            </p>
            <p>
                所属分类：
            </p>
            <p>
                <select id="pre_classify_select" name="classifyId">
                    <option value="-1">无</option>
                </select>
            </p>
            <p>
                产品图片：
            </p>
            <p>
                <a id="picker">文件上传</a> <div id="upload_list"></div>
                <div id="file_paths">
<!--                    <input type="hidden" id="file_path" name="languageFlag"/>-->
                </div>

            </p>
            <p>
                产品名称：
            </p>
            <p>
                <input
                        class="text-input large-input" type="text"
                        name="productName" placeholder="请输入产品名称"/>
            </p>
            <p>
                产品基本描述：
            </p>
            <p>
                <textarea
                        class="text-input large-input" rows="4"
                        name="productInfo" placeholder="请输入产品基本描述"
                        style="width: 100%; resize: vertical;"></textarea>
            </p>
            <p>
                产品详情：
            </p>
            <p>
                <div id="summernote"></div>
                <input type="hidden" id="productDesc" name="productDesc"/>
            </p>
            <p>
                <button type="button" class="mybutton" onclick="insert('myform', '/api/product/save', () => {
                    $('#productDesc').val($('#summernote').summernote('code'));
                });">保存</button>
                <button type="reset" class="mybutton">重置</button>
            </p>
        </form>
    </div>
    <!-- End .content-box-content -->

</div>
</body>
</html>